<template>
  <div class="blogOption">
    <div v-for="item in iconArr" :key="item.key">
      <div class="Option" @click="OptionFn(item)">
        <div
          :class="item.iconFont"
          :style="{ color: item.ifChoose ? item.selectIconFont : '#44444488' }"
        ></div>
        <span>{{ item.name }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import msg from "./msg.vue";
export default {
  props: {
    MessageLocation: {
      type: Number,
      default: 0,
    },
    blogName: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      iconArr: [
        {
          key: 0,
          name: "点赞",
          iconFont: "iconfont icondianzan",
          selectIconFont: "#fb7299",
          ifChoose: false,
        },
        {
          key: 2,
          name: "收藏",
          iconFont: "iconfont iconshoucang1",
          selectIconFont: "#f5de19",
          ifChoose: false,
        },
        {
          key: 1,
          name: "评论",
          iconFont: "iconfont iconpinglun1",
          selectIconFont: "",
        },
        { key: 3, name: "返回顶部", iconFont: "iconfont iconhuidingbu" },
      ],
    };
  },
  created() {
    this.ifCurrentBlogHasCollect();
    this.ifCurrentBlogHasGood()
  },
  methods: {
    ifCurrentBlogHasCollect() {
      this.$axios
        .get("/collect/search", {
          params: {
            blogId: this.$route.params.id,
            username: this.$store.getters.user.username,
          },
        })
        .then((res) => {
          if (res.data.error === -1) {
            //说明当前博客已被收藏
            this.ifCollect = true;
            this.$set(this.iconArr[1], "ifChoose", true);
          } else {
            this.$set(this.iconArr[1], "ifChoose", false);
          }
        });
    },
    ifCurrentBlogHasGood() {
      this.$axios
        .get("/history/search", {
          params: {
            blogId: this.$route.params.id,
            username: this.$store.getters.user.username,
          },
        })
        .then((res) => {
          console.log(res);
          if (res.data.error === -1) {
            //说明当前博客已被收藏
            this.ifCollect = true;
            this.$set(this.iconArr[0], "ifChoose", true);
          } else {
            this.$set(this.iconArr[0], "ifChoose", false);
          }
        });
    },
    OptionFn(item) {
      switch (item.key) {
        case 0:
          this.iconArr[0].ifChoose
            ? this.sendGoodDelQuest()
            : this.sendGoodAddQuest();
          return;
        case 1:
          this.goMessage();
          return;
        case 2:
          this.iconArr[1].ifChoose
            ? this.sendCollectDelQuest()
            : this.sendCollectAddQuest();
          return;
        case 3:
          this.goBackTop();
          return;
      }
    },
    sendGoodQuest() {
      // this.$axios.post("/api/")
    },
    goMessage() {
      document.querySelector(".PCindex").scrollTop = this.MessageLocation;
      this.$emit("focusTextarea")
    //   document.querySelector("textarea").focus()

    },
    sendGoodAddQuest() {
      this.$axios
        .post("/history/add", {
          username: this.$store.getters.user.username,
          blogId: this.$route.params.id,
          blogName: this.blogName,
        })
        .then((res) => {
          console.log(res);
          res.data.error === -1 &&
            this.$set(this.iconArr[0], "ifChoose", true);
        });
    },
    sendGoodDelQuest() {
      this.$axios
        .post("/history/del", {
          username: this.$store.getters.user.username,
          blogId: this.$route.params.id,
        })
        .then((res) => {
          res.data.error === -1 &&
            this.$set(this.iconArr[0], "ifChoose", false);
        });
    },
    sendCollectAddQuest() {
      this.$axios
        .post("/collect/add", {
          username: this.$store.getters.user.username,
          blogId: this.$route.params.id,
          blogName: this.blogName,
        })
        .then((res) => {
          console.log(res);
          res.data.error === -1 &&
            this.$set(this.iconArr[1], "ifChoose", true);
        });
    },
    sendCollectDelQuest() {
      this.$axios
        .post("/collect/del", {
          username: this.$store.getters.user.username,
          blogId: this.$route.params.id,
        })
        .then((res) => {
          res.data.error === -1 &&
            this.$set(this.iconArr[1], "ifChoose", false);
        });
    },
    goBackTop() {
      let timer = setInterval(() => {
        document.querySelector(".PCindex").scrollTop !== 0 &&
          (document.querySelector(".PCindex").scrollTop -= 30);
        if (document.querySelector(".PCindex").scrollTop === 0 && timer) {
          clearInterval(timer);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.blogOption {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 100px;
  height: 300px;
  background-color: rgba(255, 255, 255, 0.3);
  position: absolute;
  left: 60px;
  top: 0px;
  bottom: 0;
  margin: auto;
  perspective: 1000px;
  // transform-style: preserve-3d;
  .Option {
    text-align: center;
    div {
      font-size: 33px;
      color: #44444488;
      animation: threeDY 4s linear infinite reverse;
      // transform: rotateY(20deg);
    }
  }
}
@keyframes threeDY {
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}
</style>